<template>
  <div class="table-com">
    <div class="table-com-common table-com-title">
      <div class="table-com-td table-com-title-item">序号</div>
      <div class="table-com-td table-com-title-item" :style="{ width: !item.width ? '80px' : item.width + 'px' }"
        v-for="(item, index) in column" :key="index">
        {{ item.label }}
        <van-icon v-if="item.isSort" @click="item.SortFun(data, item)" :name="item.SortType ? 'arrow-up' : 'arrow-down'"
          size="10" color="rgb(175,171,212)" />
      </div>
      <!-- 基础操作 -->
      <div class="table-com-td table-com-title-item item-option" v-if="hasOption">操作</div>
    </div>

    <div class="table-com-list">
      <div class="table-com-common table-com-list-item" v-for="(item, index) in data" :key="index" :class="[activeRowId==item.id?'row-active':'']" @click="rowClick(item)">
        <div class="table-com-td">{{ index + 1 }}</div>
        <div class="table-com-td" :style="{
          width: !columnItem.width ? '80px' : columnItem.width + 'px',
        }" v-for="(columnItem, index) in column" :key="index">
          <span v-if="!columnItem.canChange || !item.isChange">{{ item[columnItem.prop] }}</span>
          <van-field v-model="item[columnItem.prop]" v-if="columnItem.canChange && item.isChange" />
        </div>
        <div class="table-com-td item-option" v-if="operatesCol.length">
          <div style="
              width: 100%;
              display: flex;
              padding: 0 0.5rem;
              justify-content: space-between;
            " v-if="!item.isChange">
            <div v-for="(opItem, opIndex) in operatesCol" :key="opIndex">
              <van-icon :name="opItem.icon" @click="opItem.methods(item, index)" />
            </div>
          </div>
          <div style="
              width: 100%;
              display: flex;
              justify-content: space-between;
            " v-else>
            <slot name="option" :row="item" :index="index"></slot>
          </div>
        </div>
        <slot name="setInfo" :row="item" :index="index"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableCom",
  props: {
    data: {
      type: Array,
      default: [],
    },
    column: {
      type: Array,
      default: [],
    },
    operatesCol: {
      type: Array,
      default: [],
    },
    hasOption:{
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      show: false,
      activeRowId: '',
      activeRow:null
    };
  },
  methods: {
    onInput(val, key) {
      console.log(val)
    },
    rowClick(row){
      if(this.hasOption) return 
      if(row.index != 0) return this.$toast('该选手已经确定对阵位置')
      this.activeRowId = row.id
      this.activeRow = row
    }
  }
};
</script>

<style lang="less" scoped>
.table-com {
  width: 100%;
  height: 100%;
  font-size: 0.32rem;
  color: rgba(255, 255, 255, 0.8);

  .table-com-common {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    align-items: center;

    .table-com-td {
      text-align: center;
      width: 1.6rem;

      .list-keyboard {
        color: #000;
      }
    }

    .item-option {
      width: 2.4rem;
    }
  }

  .table-com-title {
    color: rgb(92, 91, 115);
    font-size: 0.28rem;

    .table-com-title-item {
      i {
        background-color: rgb(71, 68, 108);
        border-radius: 2px;
      }
    }
  }

  .table-com-list {
    height: calc(100% - 1rem);
    overflow-y: auto;

    .table-com-list-item {
      &:nth-child(2n) {
        background-color: rgb(50, 51, 77);
      }

      .van-field {
        background: #44455d;
        padding: 0.05rem;

        /deep/ .van-field__control {
          color: rgba(255, 255, 255, 0.8) !important;
        }
      }
    }
    .row-active{
      background: rgba(88, 84, 255, 0.48)  !important;
    }
  }
}
</style>
